<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hand Tracking! • A-Frame</title>
    <meta name="description" content="Hand Tracking! • A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <script src="../../js/info-message.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script>
    <script src="pinchable.js"></script>
    <script src="color-change.js"></script>
    <script src="slider.js"></script>
    <script src="size-change.js"></script>
    <script src="button.js"></script>
    <script src="menu.js"></script>
    <script src="pressable.js"></script>
    <script src="event-manager.js"></script>
  </head>
  <body>
    <a-scene environment info-message="htmlSrc: #messageText">
      <a-assets>
        <a-asset-item id="messageText" src="message.html"></a-asset-item>
      </a-assets>
      <a-entity
        id="boxGeometry"
        position="0 2.0 -1"
        rotation="45 45 0"
        geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
        material="color: #ff4b5c"
        size-change
        scale="0.5 0.5 0.5"
      ></a-entity>
       <a-entity
        id="torusGeometry"
        position="0 2.0 -1"
        rotation="45 45 0"
        geometry="primitive: torus; radius: 0.4; radius-tubular: 0.06"
        material="color: #d2e603"
        size-change
        visible="false"
        scale="0.5 0.5 0.5"
      ></a-entity>
       <a-entity
        id="sphereGeometry"
        position="0 2.0 -1"
        rotation="45 45 0"
        geometry="primitive: sphere; radius: 0.6;"
        material="color: #fcdab7"
        size-change
        visible="false"
        scale="0.5 0.5 0.5"
      ></a-entity>
      <a-entity id="menu" menu position="0 1.5 -0.5" rotation="-45 0 0" event-manager>
        <a-entity slider position="0 0.10 0"></a-entity>
        <a-entity id="sphereButton" button="label: sphere" position="-0.15 0 0"></a-entity>
        <a-entity id="boxButton" button="label: box" position="0 0 0"></a-entity>
        <a-entity id="torusButton"button="label: torus" position="0.15 0 0"></a-entity>
        <a-entity id="darkModeButton" button="label: Dark Mode; width: 0.20; toggable: true" position="0 -0.10 0"></a-entity>
      </a-entity>
      <a-entity hand-tracking-controls="hand: left"></a-entity>
      <a-entity hand-tracking-controls="hand: right"></a-entity>
    </a-scene>
  </body>
</html>
